// 通用自定义上传
<template>
  <div>
    <el-upload
      ref="uploadComponent"
      drag
      action=""
      :show-file-list="showFileList"
      :http-request="uploadFilesRequest"
      :before-upload="beforeUpload"
      :file-list="fileList"
      :accept="accept"
      :on-progress="handleOnProcess"
      :multiple="multiple"
    />
    <el-progress v-if="progressFlag" :percentage="loadProgress" />
  </div>
</template>

<script>
// import { uploadFileNew } from '@/api/common';
export default {
  props: {
    multiple: {
      type: Boolean,
      default: false
    },
    accept: {
      type: String,
      default: 'image'
    },
    fileList: {
      type: Array,
      default: () => []
    },
    moduleName: {
      type: String,
      default: ''
    },
    maxSize: {
      type: Number,
      default: 30
    }
  },
  data() {
    return {
      loadProgress: 0,
      progressFlag: false,
      showFileList: false
    };
  },
  methods: {
    uploadFilesRequest(param) {
      const formData = new FormData();
      formData.append('file', param.file);
      formData.append('module', this.moduleName);
      // uploadFileNew(formData).then(({ success, value }) => {
      //   this.showFileList = true;
      // }).catch(() => {
      //   this.fileList = [];
      //   this.$refs.uploadBox.clearFiles();
      //   // const files = this.$refs.uploadBox.uploadFiles; //上传多个的情况
      //   	// files.splice(files.length - 1, 1);
      // });
    },
    handleOnProcess(event, file, fileList) {
      this.progressFlag = true; // 显示进度条
      this.showFileList = false;
      this.loadProgress = parseInt(event.percent); // 动态获取文件上传进度
      if (this.loadProgress >= 100) {
        this.loadProgress = 100;
        setTimeout(() => {
          this.progressFlag = false;
        }, 500);
      }
    },
    beforeUpload(file) {
      this.showFile = false;
      if (file.size > this.maxSize * 1000000) {
        this.$message({
          message: `文件过大，请上传${this.maxSize}m以内大小的文件！`,
          type: 'error'
        });
        return false;
      }
    }
  }
};
</script>
